<!-- 2024 - 03-08 版本 -->
<template>
  <div class="big-box">
    <stat></stat>
    <!-- 头部 -->
    <div class="header" @click="goFn()">
      <div class="h-left">
        <div class="change-list">
          <div class="menuTab-name" @click="gotoScreen(1)">房主自查</div>
          <div class="menuTab-name" @click="gotoScreen(2)">村级检查</div>
          <div class="menuTab-name" @click="gotoScreen(3)">攻坚整治</div>
          <!-- <div class="menuTab-name" @click="gotoScreen(4)">执法情况</div> -->
        </div>
      </div>
      <div class="h-center">
        <div class="title">村民经营性自建房消防安全排查治理</div>
      </div>
      <div class="h-right">
        <div class="all" @click="openAll('统计')">
          <div>共涉及区：{{ allV.qu }}</div>
          <div>乡镇：{{ allV.xz }}</div>
          <div>村：{{ allV.cun }}</div>
        </div>
        <div class="time">
          <img src="@/assets/bigScreen/time.png" alt="" />
          <div class="date">{{ dates }}</div>
        </div>
      </div>
    </div>
    <!-- 主题内容 -->
    <div class="content">
      <div class="box-con">
        <!-- 左边 -->
        <div class="main-l">
          <div class="m-l-top">
            <div class="title-item animate__animated animate__fadeInUp">
              基本信息
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <div class="sta-box">
                <!-- @click="baseClick(item)"
                  :style="{
                    cursor: item.name === '自查隐患数量' ? 'pointer' : '',
                  }" -->
                <div
                  class="sta-li"
                  v-for="(item, index) in baseList"
                  :key="index"
                >
                  <img src="@/assets/bigScreen/costa-bg.png" alt="" />
                  <div class="sta-li-r">
                    <div class="text">{{ item.name }}</div>
                    <div class="count">
                      <CountTo
                        :startVal="0"
                        :endVal="item.value"
                        :separator="false"
                        :duration="2000"
                      /><span>{{ item.unit }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="m-l-center">
            <div class="title-item animate__animated animate__fadeInUp">
              <div>人员疏散通道建设情况</div>
              <div class="more" @click="openLine1">更多>></div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <line1
                :key="currentIndex"
                style="padding: 10px 0 0 20px"
                :limit="[0, 4]"
                :xData="rysstdjsXData"
                :data1="zzzdfaData"
                :data2="zzsgData"
                :data3="ywcData"
              ></line1>
            </div>
          </div>
          <div class="m-l-bottom">
            <div class="title-item animate__animated animate__fadeInUp">
              <div>消防隐患处理情况</div>
              <div class="more" @click="openBar1">更多>></div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <bar1
                v-if="true"
                :limit="[0, 4]"
                :xData="xfyhclxData"
                :data1="yhslData"
                :data2="zgslData"
                :legendText="xfyhclText"
              ></bar1>
            </div>
          </div>
        </div>
        <!-- 中间 -->
        <div class="main-c">
          <div class="m-c-top">
            <div class="top-list animate__animated animate__fadeInUp">
              <div
                class="l-item"
                v-for="(item, index) in topList"
                @click="tabClick(item)"
              >
                <div class="top">
                  <div class="t-left">
                    {{ item.name }}
                  </div>
                  <div class="t-right">{{ item.name1 }} : {{ item.value }}</div>
                </div>
                <div class="bottom">
                  <div class="b-left">{{ item.percent }}</div>
                  <div class="b-right">
                    <div class="r-top">日环比: {{ item.rhb }}</div>
                    <div class="r-bottom">周环比:{{ item.zhb }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="m-c-center animate__animated animate__fadeInUp">
            <!-- :mapData="mapData" -->
            <nmgMap
              :key="mapKey"
              :maplist="[]"
              :mapData="mapData"
              :areaTypeMap="areaTypeMap"
              @getMapList="getMapList"
              style="width: 100%; height: 100%"
            />
          </div>
          <div class="m-c-bottom">
            <div class="wrap">
              <div class="b-left">
                <div class="b-l-title animate__animated animate__fadeInUp">
                  <span class="jrzc" @click="openJrzc('近7日自查情况')"
                    >近7日自查情况</span
                  >
                  <span
                    class="header-bj"
                    :class="{ 'active-item': selectedIndex === 17 }"
                    @click="handleBjClick(17, '110000')"
                    >(北京市)</span
                  >
                </div>
                <div class="bj-qu-list animate__animated animate__fadeInUp">
                  <div
                    class="qu-item"
                    v-for="(item, index) in quList"
                    :key="index"
                    @click="handleItemClick(index, item)"
                    :class="{ 'active-item': selectedIndex === index }"
                  >
                    {{ item.regionName }}
                  </div>
                </div>
              </div>
              <div class="b-right animate__animated animate__fadeInUp">
                <pie1 :key="currentIndex" :bottomData="bottomData" />
              </div>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="main-r">
          <div class="m-r-top">
            <div class="title-item animate__animated animate__fadeInUp">
              <div>清理室内电动自行车情况</div>
              <div class="more" @click="openRight1">更多>></div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <right1
                :key="1"
                :xData="qlddc_xData"
                :data1="ddc_Data"
                :data2="ccql_Data"
              ></right1>
            </div>
          </div>
          <div class="m-r-center">
            <div class="title-item animate__animated animate__fadeInUp">
              <div>自防自救力量建设</div>
              <div class="more" @click="openRight2">更多>></div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <right2 :key="currentIndex" :tableData="tableData"></right2>
            </div>
          </div>
          <div class="m-r-bottom">
            <div class="title-item animate__animated animate__fadeInUp">
              <div>宣传警示开展情况</div>
              <div class="more" @click="openRight3">更多>></div>
            </div>
            <div class="content1 animate__animated animate__fadeInUp">
              <right3 :key="currentIndex" :listData="listData"></right3>
            </div>
          </div>
        </div>
      </div>
    </div>

    <detailModal
      v-if="showDetail"
      :title="tableTitle"
      :title2="title2"
      :CurrentLevel="CurrentLevel"
      @backFn="backFn"
      @changeModalVisibe="changeModalVisibe"
    >
      <template v-slot:customContent>
        <div class="table-style">
          <Tables
            ref="TablesRef"
            :tableData="zcQuList"
            v-if="tableTitle === '自查率'"
            @updateCurrentQu="updateCurrentQu"
          />
          <Tables1
            ref="Tables1Ref"
            :tableData="jcQuList"
            v-if="tableTitle === '检查率'"
            @updateCurrentQu="updateCurrentQu"
          />
          <Tables2
            ref="Tables2Ref"
            :tableData="hcQuList"
            v-if="tableTitle === '核查率'"
            @updateCurrentQu="updateCurrentQu"
          />
          <Tables3
            :tableData="zcQkBjList"
            :columns="zcQkBjColumn"
            v-if="tableTitle === '近7日自查情况'"
          />
          <Tables4
            :tableData="tableData"
            v-if="tableTitle === '自防自救力量建设'"
          />
          <Tables5
            :tableData="listData"
            v-if="tableTitle === '宣传警示开展情况'"
          />
          <Tables6 :tableData="allTableList" v-if="tableTitle === '统计'" />
          <!-- <Tables7
            :tableData="allTableList"
            v-if="tableTitle === '自查隐患数量'"
          /> -->
        </div>
      </template>
    </detailModal>

    <chartModal
      v-if="showChart"
      :title="chartTitle"
      @changeModalVisibe="changeChartVisibe"
    >
      <template v-slot:customContent>
        <div class="chart-style">
          <line1
            v-if="chartTitle === '人员疏散通道建设情况'"
            :key="currentIndex"
            :limit="[0, 20]"
            :isLoop="false"
            :xData="rysstdjsXData"
            :data1="zzzdfaData"
            :data2="zzsgData"
            :data3="ywcData"
            :grid="{
              top: '15%',
              left: '5%',
              right: '5%',
              bottom: '5%',
              containLabel: true,
            }"
          ></line1>
          <bar1
            v-if="chartTitle === '消防隐患处理情况'"
            :limit="[0, 20]"
            :isLoop="false"
            :xData="xfyhclxData"
            :data1="yhslData"
            :data2="zgslData"
            :legendText="xfyhclText"
            :grid="{
              top: '15%',
              left: '5%',
              right: '5%',
              bottom: '5%',
              containLabel: true,
            }"
          ></bar1>
          <right1
            v-if="chartTitle === '清理室内电动自行车情况'"
            :key="11"
            :limit="[0, 13]"
            :isLoop="false"
            style="padding: 10px 0 0 20px"
            :data1="ddc_Data"
            :data2="ccql_Data"
            :xData="qlddc_xData"
            :grid="{
              top: '15%',
              left: '5%',
              right: '5%',
              bottom: '5%',
              containLabel: true,
            }"
          ></right1>
        </div>
      </template>
    </chartModal>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import stat from './component/childComponent/stat.vue'
import { CountTo } from 'vue3-count-to'
import line1 from '@/Pages/bigScreen/components/index/line1.vue' // 人员疏散通道建设情况
import bar1 from '@/Pages/bigScreen/components/index/bar1.vue' // 消防隐患处理情况
import right1 from '@/Pages/bigScreen/components/index/right1.vue' // 清理室内电动自行车情况

import barCharts from '@/Pages/bigScreen/components/baseInfo/charts/barCharts.vue'
import nmgMap from '@/Pages/bigScreen/map/nmgMap.vue' // 地图
import pie1 from '@/Pages/bigScreen/components/index/pie1.vue' // 今日各区县自查情况
//
import left1 from '@/Pages/bigScreen/components/left1.vue'
import left3 from '@/Pages/bigScreen/components/left3.vue'

import right2 from '@/Pages/bigScreen/components/index/right2.vue'
import right3 from '@/Pages/bigScreen/components/index/right3.vue'

import detailModal from '@/Pages/bigScreen/components/detailModal.vue'
import chartModal from '@/Pages/bigScreen/components/chartModal.vue'
import Tables from '@/Pages/bigScreen/components/Tables.vue'
import Tables1 from '@/Pages/bigScreen/components/Tables1.vue'
import Tables2 from '@/Pages/bigScreen/components/Tables2.vue'
import Tables3 from '@/Pages/bigScreen/components/Tables3.vue'
import Tables4 from '@/Pages/bigScreen/components/Tables4.vue'
import Tables5 from '@/Pages/bigScreen/components/Tables5.vue'
import Tables6 from '@/Pages/bigScreen/components/Tables6.vue'
import Tables7 from '@/Pages/bigScreen/components/Tables7.vue'

import {
  getCheckrate,
  getBaseInfoIndex,
  getBaseInfoRysstdjsqk,
  getBaseInfoXfyhclqk,
  getTopList,
  getBottomQuList,
  getBottomData,
  getBaseInfoDdcData,
  getBaseInfoZfZjData,
  getBaseInfoXcKzData,
  getBaseInfoMapData, // 地图
  getBaseInfoZCQxData,
  getBaseInfoJCQxData, // 检查
  getBaseInfoHCQxData, // 核查
  getBaseInfoZCQKBJData, // 近7日自查情况（展示没接口）
  getBaseInfoAllData, // 共涉及
  getBaseInfoAllTableData, // 共涉及表格
} from '@/api/index.js'
import {
  areaTypeMapList,
  policyPieDataList,
  linesDataOneList,
  linexDataOneList,
  linesDataTwoList,
  linexDataTwoList,
  registerLinesDataList,
  registerLines1DataList,
  registerLinexDataList,
  dynamicXDataList,
  ddynamicSDataList,
} from '../bigScreen/areaTypeMap.js'

const currentIndex = ref(1)
const router = useRouter()
const dates = ref('') // 日期

const params = ref({
  city: undefined,
})
// 1. 基本信息
const baseList = ref([
  {
    name: '经营性自建房数量',
    value: 0,
    unit: '栋',
  },
  {
    name: '自查房屋数量',
    value: 0,
    unit: '栋',
  },
  {
    name: '自查隐患数量',
    value: 0,
    unit: '处',
  },
  {
    name: '整改隐患数量',
    value: 0,
    unit: '处',
  },
])
const _getBaseInfoIndex = async () => {
  let res = await getBaseInfoIndex()
  baseList.value = res.data.data
}
// const baseClick = (item) => {
//   if (item.name === '自查隐患数量') {
//     tableTitle.value = item.name
//     showDetail.value = true
//     console.log('@自查隐患数量==', item)
//   }
// }

// 2.人员疏散通道情况
const rysstdjsXData = ref([
  '朝阳区',
  '丰台区',
  '石景山区',
  '海淀区',
  '门头沟区',
  '房山区',
  '通州区',
  '顺义区',
  '昌平区',
  '大兴区',
  '怀柔区',
  '平谷区',
  '密云区',
  '延庆区',
])
const zzzdfaData = ref([846, 490, 281, 60, 34, 22, 33, 44, 55, 77, 77, 23]) // 正在制定方案
const zzsgData = ref([670, 401, 121, 94, 8, 55, 66, 222, 454, 555, 666, 777]) // 正在施工
const ywcData = ref([
  262, 219, 132, 361, 325, 344, 555, 666, 222, 111, 222, 565,
]) // 已完成
const _getBaseInfoRysstdjsqk = async () => {
  let res = await getBaseInfoRysstdjsqk()
  rysstdjsXData.value = res.data.data.x
  zzzdfaData.value = res.data.data.zzzdfa
  zzsgData.value = res.data.data.zzsggz
  ywcData.value = res.data.data.ywc
}
const showChart = ref(false)
const chartTitle = ref('')
const changeChartVisibe = (data) => {
  showChart.value = data
}
const openLine1 = () => {
  chartTitle.value = '人员疏散通道建设情况'
  showChart.value = true
}

// 3.消防隐患处理情况
// 隐患处理总数
const xfyhclxData = ref([
  '朝阳区',
  '丰台区',
  '石景山区',
  '海淀区',
  '门头沟区',
  '房山区',
  '通州区',
  '顺义区',
  '昌平区',
  '大兴区',
  '怀柔区',
  '平谷区',
  '密云区',
  '延庆区',
])
const yhslData = ref([])
const zgslData = ref([])
const xfyhclText = ref(['隐患数量', '整改数量'])
const _getBaseInfoXfyhclqk = async () => {
  let res = await getBaseInfoXfyhclqk()
  xfyhclxData.value = res.data.data.x
  zgslData.value = res.data.data.zgcount
  yhslData.value = res.data.data.yhcount
}

const openBar1 = () => {
  chartTitle.value = '消防隐患处理情况'
  showChart.value = true
}
// 4.中间卡片
const topList = ref([
  {
    name: '自查率',
    name1: '自查数',
    percent: '0%',
    rhb: '0%',
    zhb: '0%',
    value: '0',
  },
  {
    name: '检查率',
    name1: '检查数',
    percent: '0%',
    rhb: '0%',
    zhb: '0%',
    value: '0',
  },
  {
    name: '核查率',
    name1: '核查数',
    percent: '0%',
    rhb: '0%',
    zhb: '0%',
    value: '0',
  },
])
// 卡片
const _getTopList = async () => {
  let res = await getTopList()
  topList.value = res.data.data
}

// 自查率 区县
const tableTitle = ref('')
const zcQuList = ref([])

// 点击tab
const tabClick = async (item) => {
  // console.log('@item', item)
  tableTitle.value = item.name
  if (item.name === '自查率') {
    ZclFn()
  } else if (item.name === '检查率') {
    JclFn()
  } else if (item.name === '核查率') {
    HclFn()
  }
}
const ZclFn = async () => {
  let res = await getBaseInfoZCQxData()
  let list = res.data.data.items
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.yhcount = Number(item.yhcount)
    item.zccount = Number(item.zccount)
    // item.zcl = Number(item.zcl)
    item.zcount = Number(item.zcount)
    item.zgcount = Number(item.zgcount)
    return item
  })
  zcQuList.value = modifiedList
  if (zcQuList.value.length > 0) {
    showDetail.value = true
  }
}
// 检查
const jcQuList = ref([])
const JclFn = async () => {
  let res = await getBaseInfoJCQxData()
  let list = res.data.data.items
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.yhcount = Number(item.yhcount)
    item.zccount = Number(item.zccount)
    // item.zcl = Number(item.zcl)
    item.zcount = Number(item.zcount)
    item.zgcount = Number(item.zgcount)
    return item
  })
  jcQuList.value = modifiedList
  if (jcQuList.value.length > 0) {
    showDetail.value = true
  }
}
const title2 = ref('')
const CurrentLevel = ref(1)
const updateCurrentQu = (newCurrentQu, newCurrentLevel) => {
  let result = newCurrentQu.join('-')
  title2.value = result ? `-${result} ` : ''
  CurrentLevel.value = newCurrentLevel
}
const TablesRef = ref(null)
const Tables1Ref = ref(null)
const Tables2Ref = ref(null)
const backFn = () => {
  if (tableTitle.value === '自查率') {
    TablesRef.value.backFn()
  } else if (tableTitle.value === '检查率') {
    Tables1Ref.value.backFn()
  } else if (tableTitle.value === '核查率') {
    Tables2Ref.value.backFn()
  }
}

// 核查
const hcQuList = ref([])
const HclFn = async () => {
  let res = await getBaseInfoHCQxData()
  let list = res.data.data.items
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.yhcount = Number(item.yhcount)
    item.zccount = Number(item.zccount)
    // item.zcl = Number(item.zcl)
    item.zcount = Number(item.zcount)
    item.zgcount = Number(item.zgcount)
    return item
  })
  hcQuList.value = modifiedList
  if (hcQuList.value.length > 0) {
    showDetail.value = true
  }
  console.log('@res--核查', hcQuList.value)
}

// 5.地图
const mapKey = ref(1)
const areaTypeMap = ref([])
const mapData = ref([])
// 模拟地图请求
const _getMapDataList = async () => {
  let res = await getBaseInfoMapData()
  let list = res.data.data.items
  mapData.value = list
}

// 6.今日各区县自查情况 （未完成）
const quList = ref([])
const _getBottomQuList = async () => {
  let params = {
    id: '110000',
  }
  let res = await getBottomQuList(params)
  quList.value = res.data.data
}

// 圆环
const bottomData = ref({
  zczs: [20, 20],
  yhcount: [0, 40],
  zgcount: [0, 40],
})
const _getBottomData = async () => {
  let params = {
    id: currentId.value,
  }
  let res = await getBottomData(params)
  bottomData.value = res.data.data
}

// 7.清理室内电动自行车
const ddc_Data = ref([12, 34, 66, 777, 899, 55, 334, 555, 222, 44, 55, 89])
const ccql_Data = ref([121, 314, 66, 77, 99, 525, 334, 55, 22, 414, 551, 89])
const qlddc_xData = ref([
  '朝阳区',
  '丰台区',
  '石景山区',
  '海淀区',
  '门头沟区',
  '房山区',
  '通州区',
  '顺义区',
  '昌平区',
  '大兴区',
  '怀柔区',
  '平谷区',
  '密云区',
  '延庆区',
])
const _getBaseInfoDdcData = async () => {
  let res = await getBaseInfoDdcData()
  ddc_Data.value = res.data.data.zs
  ccql_Data.value = res.data.data.qlddcsl
  qlddc_xData.value = res.data.data.x
}
const openRight1 = () => {
  chartTitle.value = '清理室内电动自行车情况'
  showChart.value = true
  console.log('@Xdata', qlddc_xData)
}
// 8.自防自救力量建设
const tableData = ref([
  // {
  //   region_name: '东城区',
  //   rkzs: '0',
  //   wxxfz: '0',
  //   zzxfd: '0',
  // },
  // {
  //   region_name: '西城区',
  //   rkzs: '0',
  //   wxxfz: '0',
  //   zzxfd: '0',
  // },
  {
    region_name: '朝阳区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '丰台区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '石景山区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '海淀区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '门头沟区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '房山区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '通州区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '顺义区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '昌平区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '大兴区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '怀柔区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '平谷区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '密云区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
  {
    region_name: '延庆区',
    rkzs: '0',
    wxxfz: '0',
    zzxfd: '0',
  },
])
const _getBaseInfoZfZjData = async () => {
  let res = await getBaseInfoZfZjData()
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.rkzs = Number(item.rkzs)
    item.zzxfd = Number(item.zzxfd)
    item.wxxfz = Number(item.wxxfz)
    return item
  })
  tableData.value = modifiedList
}
const openRight2 = () => {
  tableTitle.value = '自防自救力量建设'
  showDetail.value = true
}

// 9.宣传警示开展情况
const listData = ref([
  // {
  //   region_name: '东城区',
  //   azgdjsbpsl: '0',
  //   jzfjs: '4',
  // },
  // {
  //   region_name: '西城区',
  //   azgdjsbpsl: '0',
  //   jzfjs: '0',
  // },
  {
    region_name: '朝阳区',
    azgdjsbpsl: '0',
    jzfjs: '0',
  },
  {
    region_name: '丰台区',
    azgdjsbpsl: '0',
    jzfjs: '0',
  },
  {
    region_name: '石景山区',
    azgdjsbpsl: '0',
    jzfjs: '0',
  },
  {
    region_name: '海淀区',
    azgdjsbpsl: '0',
    jzfjs: '0',
  },
  {
    region_name: '门头沟区',
    azgdjsbpsl: '0',
    jzfjs: '0',
  },
  {
    region_name: '房山区',
    azgdjsbpsl: '0',
    jzfjs: '0',
  },
  {
    region_name: '通州区',
    azgdjsbpsl: '0',
    jzfjs: '0',
  },
  {
    region_name: '顺义区',
    azgdjsbpsl: '0',
    jzfjs: '0',
  },
  {
    region_name: '昌平区',
    azgdjsbpsl: '0',
    jzfjs: '0',
  },
  {
    region_name: '大兴区',
    azgdjsbpsl: '0',
    jzfjs: '0',
  },
])

const _getBaseInfoXcKzData = async () => {
  let res = await getBaseInfoXcKzData()
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.azgdjsbpsl = Number(item.azgdjsbpsl)
    item.jzfjs = Number(item.jzfjs)
    return item
  })
  listData.value = modifiedList
}
const openRight3 = () => {
  tableTitle.value = '宣传警示开展情况'
  showDetail.value = true
}
const chartKey = ref(1) // key

// 共涉及
const allV = ref({
  qu: 14,
  xz: 168,
  cun: 1408,
})
const _getBaseInfoAllData = async () => {
  let res = await getBaseInfoAllData()
  allV.value = res.data.data
  // console.log('@res123123', res.data.data)
}
const allTableList = ref([])
const _getBaseInfoAllTableData = async () => {
  let res = await getBaseInfoAllTableData()
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.xzv = Number(item.xzv)
    item.cunv = Number(item.cunv)
    return item
  })
  allTableList.value = modifiedList
}
const openAll = (item) => {
  tableTitle.value = item
  showDetail.value = true
}
//判断时间是否为个位数，如果时间为个位数就在时间之前补上一个“0”
const check = (val) => {
  if (val < 10) {
    return '0' + val
  } else {
    return val
  }
}
const displayTime = () => {
  //获取系统当前的年、月、日、小时、分钟、毫秒
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  let hour = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  dates.value = `${year}年${month}月${day}日 ${check(hour)}:${check(
    minutes
  )}:${check(seconds)}`
}

//每隔1秒调用一次displayTime函数
const start = () => {
  setInterval(() => {
    displayTime()
  }, 1000) //单位是毫秒
}
// 每隔 5分钟 调用一次
const task5Min = () => {
  setInterval(() => {
    _getBaseInfoIndex() // 基本信息
    _getTopList() // 中间卡片
    // selectedIndex.value = 17
    // currentId.value = '110000'
    handleBjClick(17, '110000') // 圆环的数据(北京)
  }, 300000) // 5分钟的毫秒数 300000
}

onMounted(() => {
  start()
  task5Min()
  // _getPersonList()
  // _getDemandList()
  // getCityList()
  // _getAchievementList()
  // _getOrgList()
  // _getRegisterList()
  // _getDynamicList()
  // _getPolicyList()
  // _getCompanyList()
  _getBaseInfoIndex() // 获取基本信息
  _getBaseInfoRysstdjsqk() // 人员疏散通道建设情况
  _getBaseInfoXfyhclqk() // 消防隐患处理情况
  _getTopList() // 卡片
  _getMapDataList() // 地图
  _getBottomQuList() // 区县列表
  _getBottomData() // 中间下部
  _getBaseInfoDdcData() // 清理室内电动自行车情况
  _getBaseInfoZfZjData() // 自防自救力量建设
  _getBaseInfoXcKzData() // 宣传警示开展情况
  _getBaseInfoAllData()
  _getBaseInfoAllTableData() // 统计共涉及
  // _getBaseInfoZCQxData() // 自查区县
  // _getCheckrate()
})
const _getCheckrate = async () => {
  let res = await getCheckrate()
  console.log('@自查率', res)
}
const getMapList = (id) => {
  params.value.city = id
  // _getPersonList()
  // _getDemandList()
  // _getAchievementList()
  // _getOrgList()
  // _getRegisterList()
  // _getDynamicList()
  // _getPolicyList()
  // _getCompanyList()
  chartKey.value++
}

const resetMap = () => {
  chartKey.value++
  mapKey.value++
  params.value.city = undefined
  _getPersonList()
  _getDemandList()
  _getAchievementList()
  _getOrgList()
  _getRegisterList()
  _getDynamicList()
  _getPolicyList()
  _getCompanyList()
}

// 1.1人才库
const personTotal = ref(0) // 人数
const pieData = ref([]) // 人才 饼图
const _getPersonList = () => {
  personTotal.value = [1, 2, 3] // 人才总数
  pieData.value = [
    {
      name: '高端人才',
      value: 111,
    },
    {
      name: '院士专家工作站',
      value: 55,
    },
    {
      name: '草原英才”领军人才',
      value: 49,
    },
    {
      name: '绿色通道”引进人才',
      value: 1598,
    },
  ] // 饼图数据
  // getPersonList(params.value).then(res => {
  //     if(res.code == 200) {
  //         // personTotal.value = res.data.total
  //         personTotal.value = res.data.total ? res.data.total.toString().split('') : []
  //         console.log('@personTotal.value', personTotal.value)
  //         res.data.data.map(item => {
  //             pieData.value.push({
  //                 name: item.type,
  //                 value: item.count
  //             })
  //         })
  //     }
  // })
  // console.log('@pieData.value', pieData.value)
}

// 1.2需求库
const demandTotal = ref(0)
const xdata = ref([])
const sdata = ref([])
const _getDemandList = () => {
  demandTotal.value = [8, 3, 4]
  xdata.value = [
    '科技研发需求',
    '科研人才需求',
    '概念验证需求',
    '中试熟化需求',
    '成果需求',
    '融资需求',
  ]
  sdata.value = [123, 456, 23, 556, 689, 343]
  // getDemandList(params.value).then(res => {
  //     if(res.code == 200) {
  //         demandTotal.value = res.data.total.toString()
  //         console.log('@', demandTotal.value)
  //         res.data.data.map(item => {
  //             xdata.value.push(item.type)
  //             sdata.value.push(item.count)
  //         })
  //     }
  // })
  // getTableList().then((res) => {
  //   console.log('@res==', res)
  // })
}

// 3.企业库

const companyTotal = ref(0)
const technologyEnterpriseCount = ref(0)
const littleEnterpriseCount = ref(0)
const yearLeaderEnterpriseCount = ref(0)
const _getCompanyList = () => {
  companyTotal.value = [8, 3, 4]
  technologyEnterpriseCount.value = 1887
  littleEnterpriseCount.value = 123
  yearLeaderEnterpriseCount.value = 434
  // getCompanyList(params.value).then(res => {
  //     if(res.code == 200) {
  //         companyTotal.value = res.data.total.toString()
  //         technologyEnterpriseCount.value = res.data.technologyEnterpriseCount
  //         littleEnterpriseCount.value = res.data.littleEnterpriseCount
  //         yearLeaderEnterpriseCount.value = res.data.yearLeaderEnterpriseCount
  //     }
  // })
}

// 4.政策库
const policyTotal = ref(0)
const policyPieData = ref([])
const _getPolicyList = () => {
  policyTotal.value = [8, 3, 4]
  policyPieData.value = policyPieDataList
  console.log('@', policyPieData.value)
  // getPolicyList(params.value).then(res => {
  //     if(res.code == 200) {
  //         policyTotal.value = res.data.total.toString()
  //         res.data.data.map(item => {
  //             policyPieData.value.push({
  //                 name: item.type,
  //                 value: item.count
  //             })
  //         })
  //     }
  // })
}

// 5.成果库
const achievementTotal = ref(0)
const linesDataOne = ref([])
const linexDataOne = ref([])
const _getAchievementList = () => {
  achievementTotal.value = [8, 3, 4]
  linesDataOne.value = linesDataOneList
  linexDataOne.value = linexDataOneList
  // getAchievementList(params.value).then(res => {
  //     achievementTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         linexDataOne.value.push(item.type)
  //         linesDataOne.value.push(item.count)
  //     })
  // })
}

// 6.机构库
const orgTotal = ref(0)
const linesDataTwo = ref([])
const linexDataTwo = ref([])
const _getOrgList = () => {
  orgTotal.value = [8, 3, 4]
  linesDataTwo.value = linesDataTwoList
  linexDataTwo.value = linexDataTwoList
  // getOrgList(params.value).then(res => {
  //     orgTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         linexDataTwo.value.push(item.type)
  //         linesDataTwo.value.push(item.count)
  //     })
  // })
}

// 7.注册人数
const registerTotal = ref(0)
const registerLinesData = ref([])
const registerLines1Data = ref([])
const registerLinexData = ref([])
const _getRegisterList = () => {
  registerTotal.value = [8, 3, 4]
  registerLinesData.value = registerLinesDataList
  registerLines1Data.value = registerLines1DataList
  registerLinexData.value = registerLinexDataList
  // getRegisterList(params.value).then(res => {
  //     registerTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         registerLinesData.value.push(item.registerCount)
  //         registerLines1Data.value.push(item.accreditationCount)
  //         registerLinexData.value.push(item.type)
  //     })
  // })
}

// 8.平台动态
const dynamicTotal = ref(0)
const dynamicXData = ref([])
const dynamicSData = ref([])
const _getDynamicList = () => {
  dynamicTotal.value = [8, 3, 4]
  dynamicXData.value = dynamicXDataList
  dynamicSData.value = ddynamicSDataList
  // getDynamicList(params.value).then(res => {
  //     dynamicTotal.value = res.data.total.toString()
  //     res.data.data.map(item => {
  //         dynamicXData.value.push(item.type)
  //         dynamicSData.value.push(item.count)
  //     })
  // })
}

// 去科技人才
const goPersonTotalPage = () => {
  router.push({
    path: '/bigScreenNewIndex',
  })
}
// 返回
const goBack = () => {
  router.push({
    path: '/index',
  })
}
// 切换
const gotoScreen = (act) => {
  console.log(act, 'gxn')
  router.push({
    path: '/bigScreen',
    query: {
      act: act,
    },
  })
}
const goFn = () => {
  console.log('header====')
}

const showDetail = ref(false)
const type = ref()
const changeModalVisibe = (data) => {
  showDetail.value = data
  CurrentLevel.value = 1
  title2.value = ''
}

// 今日各区县自查情况
const selectedIndex = ref(17)
// 点击加高亮
const currentId = ref('110000')
const handleItemClick = (index, item) => {
  selectedIndex.value = index
  currentId.value = item.id
  _getBottomData()
}
// 北京市
const handleBjClick = (index, item) => {
  selectedIndex.value = index
  currentId.value = item
  _getBottomData()
}
// 打开今日情况
const zcQkBjList = ref([])
const zcQkBjColumn = ref([
  // {
  //   label: '今日自查率',
  //   prop: 'zcl',
  //   align: 'center',
  //   sortable: true,
  //   sortMethod: true,
  // },
])
const openJrzc = async (item) => {
  tableTitle.value = item
  let res = await getBaseInfoZCQKBJData() //(展示没接口)
  let column = res.data.data.columns
  column.map((item, index) => {
    item.align = 'center'
    if (item.label === '序号' || item.label === '区') {
      item.sortable = false
      item.width = '80'
    } else {
      item.sortable = true
      item.width = '120'
    }
    return item
  })
  zcQkBjColumn.value = column
  let list = res?.data?.data?.data
  list.push(res?.data?.data?.hj)
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    return item
  })
  zcQkBjList.value = modifiedList
  if (zcQkBjList.value.length > 0) {
    showDetail.value = true
  }
}
</script>

<style scoped="scoped" lang="scss">
@font-face {
  font-family: 'ffa';
  src: url(@/assets/bigScreen/fonts/DS-DIGIB.TTF);
}
ul,
li {
  list-style: none;
}
.big-box {
  // background-color: #e7250c;
  background-color: #071c3b;
  height: 100vh;
  overflow: hidden;
  .header {
    // text-align: center;
    position: relative;
    height: 11.5rem;
    // border: 1px solid red;
    background-image: url('@/assets/bigScreen1/header.png');
    background-repeat: no-repeat;
    background-size: 100% 40%;
    display: flex;
    justify-content: space-between;
    .h-left {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      display: flex;
      align-items: center;

      .change-list {
        width: 100%;
        height: 2rem;
        // height: 40px;
        padding: 0 2rem;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        font-size: 1vw;
        .menuTab-name {
          width: 9rem;
          height: 4rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url('@/assets/bigScreen/menu-tab.png') no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
    .h-center {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      line-height: 8rem;
      .title {
        color: #23b9eb;
        text-align: center;
        font-size: 1.8vw;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-weight: bold;
      }
    }
    .h-right {
      width: 30%;
      height: 100%;
      // border: 1px solid sandybrown;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .all {
        width: 48%;
        line-height: 4rem;
        // border: 1px solid red;
        margin-top: 1rem;
        display: flex;
        font-size: 0.9vw;
        justify-content: space-between;
        font-weight: bold;
        cursor: pointer;
      }
      .all:hover {
        color: #01e7f6;
      }
      .time {
        width: 50%;
        // border: 1px solid red;
        margin-top: 1rem;
        line-height: 4rem;
        font-size: 1vw;
        height: 4rem;
        display: flex;
        align-items: center;
        .date {
          margin-left: 2rem;
        }
      }
    }
  }

  .content {
    height: calc(100vh - 13.6rem);
    padding: 0 3rem 2.5rem;
    // border: 1px solid red;
    .box-con {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      // border: 1px solid seagreen;
      .main-l {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .m-l-top {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
            .sta-box {
              height: 100%;
              padding: 2rem;
              display: flex;
              // align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;
              box-sizing: border-box;

              @keyframes fadenum {
                100% {
                  transform: rotate(360deg);
                }
              }

              .sta-li {
                width: calc((100% - 2rem) / 2);
                height: calc((100% - 2rem) / 2);
                border-radius: 0.6rem;
                background: #00183b;
                border: 0.1rem solid rgba(45, 205, 255, 0.17);
                display: flex;
                justify-content: space-around;
                align-items: center;
                padding: 0 0rem;
                &:nth-child(n + 3) {
                  margin-top: 2rem;
                }
                img {
                  width: 6rem;
                  height: 6rem;
                  animation: fadenum 2s infinite;
                }
                .sta-li-r {
                  // border: 1px solid red;
                  height: 4rem;
                  .text {
                    font-size: 0.8vw;
                    line-height: 1.7rem;
                    color: rgba(255, 255, 255, 0.64);
                    margin-bottom: 1rem;
                  }
                  .count {
                    text-align: right;
                    font-size: 1.1vw;
                    line-height: 2.2rem;
                    color: rgba(255, 255, 255, 0.87);
                    font-weight: bold;
                  }
                }
              }
            }
          }
        }
        .m-l-center {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
          }
        }
        .m-l-bottom {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
          }
        }
      }
      .main-c {
        width: 49%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .m-c-top {
          height: 20%;
          border: 2px solid #274187;
          width: 100%;
          .top-list {
            display: flex;
            justify-content: space-between;
            // border: 1px solid red;
            height: 100%;
            width: 100%;
            .l-item {
              background: url('@/assets/bigScreen1/item.png') no-repeat;
              background-size: 100% 100%;
              height: 100%;
              width: 27%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              padding: 0 2rem;
              cursor: pointer;
              .top {
                height: 4rem;
                // border: 1px solid red;
                line-height: 4rem;
                font-size: 0.9vw;
                display: flex;
                justify-content: space-between;
              }
              .bottom {
                height: 6rem;
                // border: 1px solid red;
                display: flex;
                .b-left {
                  width: 53%;
                  // border: 1px solid red;
                  font-size: 1.6vw;
                  display: flex;
                  align-items: center;
                  color: #20dbfd;
                }
                .b-right {
                  // border: 1px solid red;
                  width: 47%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  font-size: 0.7vw;
                  align-items: flex-start;
                  .r-top {
                    color: red;
                  }
                  .r-bottom {
                    color: green;
                  }
                }
              }
            }
          }
        }
        .m-c-center {
          height: 56%;
          border: 2px solid #274187;
        }
        .m-c-bottom {
          height: 20%;
          border: 2px solid #274187;

          .wrap {
            padding: 1rem;
            height: calc(100% - 2rem);
            display: flex;
            justify-content: space-between;
            .b-left {
              height: 100%;
              width: 36%;
              // border: 1px solid red;
              .b-l-title {
                height: 3rem;
                line-height: 3rem;
                font-size: 0.9vw;
                // border: 1px solid red;
                .jrzc {
                  text-decoration: underline;
                  cursor: pointer;
                }
                .header-bj {
                  margin-left: 1rem;
                  cursor: pointer;
                }
              }
              .bj-qu-list {
                height: calc(100% - 4rem);
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                // justify-content: space-between;
                justify-content: flex-end;
                align-items: center;
                .qu-item {
                  width: 30%;
                  height: 2.2rem;
                  line-height: 2.2rem;
                  font-size: 0.7vw;
                  // border: 1px solid red;
                }
                &:hover {
                  cursor: pointer;
                }
              }
            }
            .b-right {
              height: 100%;
              width: 60%;
              // border: 1px solid red;
            }
          }
        }
      }

      .main-r {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .m-r-top {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
          }
        }
        .m-r-center {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
          }
        }
        .m-r-bottom {
          height: 32%;
          border: 2px solid #274187;
          // border-radius: 6px;
          .content1 {
            height: calc(100% - 4rem);
            // border: 1px solid red;
          }
        }
      }
    }
  }
}
.h4s {
  height: 4.5rem;
  line-height: 4.5rem;
  background-image: url('@/assets/bigScreen/title-bg4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem 0.3rem 4.7rem;
  box-sizing: border-box;

  .tit-l {
    font-size: 0.9vw;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

    span {
      font-size: 0.7vw;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.62);
      margin-left: 1.8rem;
    }
  }
  .tit-r {
    display: flex;
    align-items: center;
  }
  .more {
    font-size: 0.6vw;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
    cursor: pointer;
  }
}
.h4s-ts {
  background-image: url('@/assets/bigScreen/title-bg31.png');
}
.h4s-ts2 {
  background-image: url('@/assets/bigScreen/title-bg32.png');
}

.title-item {
  height: 4rem;
  line-height: 2rem;
  font-size: 0.8vw;
  padding: 0 1rem;
  // border: 1px solid red;
  background-image: url('@/assets/bigScreen1/title.png');
  background-repeat: no-repeat;
  background-size: 81% 90%;
  display: flex;
  justify-content: space-between;
  .more {
    cursor: pointer;
    // font-weight: bolder;
    text-decoration: underline;
    font-size: 0.9vw;
  }
  .more:hover {
    color: #20dbfd;
  }
}
.active-item {
  color: #01e7f6;
}
.table-style {
  // border: 1px solid red;
  height: calc(100% - 3rem);
}
.chart-style {
  height: calc(100% - 1rem);
}
</style>
